<script setup>
import {onMounted, onUnmounted, ref} from "vue";
  import { ElMessage } from "element-plus";
  import { useStore } from "@/store/index.js";
  import accountApi from "@/api/authorization/index.js";
  import router from "@/router/index.js";
  import CommonUtil from "@/utils/CommonUtil.js";
  import VerifyCodeButton from "@/components/login/VerifyCodeButton.vue";
  import ObjectUtil from "@/utils/ObjectUtil.js";
  import SecurityUtil from "@/utils/SecurityUtil.js";
  import ResponseUtil from "@/utils/ResponseUtil.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";

  const store = useStore();

  const data = ref({
    account: '',
    password: '',
    verifyPassword: '',
    verifyCode: '',
  })

  let loading = ref(false);

  onMounted(() => {
    // 绑定全局监听事件
    window.addEventListener('keydown', handleKeydown);
  })

  onUnmounted(() => {
    // 销毁全局监听事件
    window.removeEventListener('keydown', handleKeydown);
  })

  const handleKeydown = (e) => {
    // 按下回车键时的处理逻辑
    if (e.keyCode === 13) {
      reset();
    }
  }

  const reset = () => {
    // 参数校验
    if (!checkParam()) return;

    // 提交按钮进入加载
    loading.value = true;

    // 清除对象关联并赋值
    let request = ObjectUtil.clearRef(data.value);

    // 密码和重复密码非对称加密
    request.password = SecurityUtil.encrypt(request.password);
    request.verifyPassword = SecurityUtil.encrypt(request.verifyPassword);

    // 向服务器发送请求
    accountApi.reset(request).then(response => {
      // 登录按钮加载结束
      loading.value = false;

      ResponseUtil.data(response).dispose(response => {
        if (response.code === '200') {
          ElMessage.success('重置密码成功');

          // 清除 本地缓存 和 状态库 中的收藏列表数据
          LocalStoreUtil.clearToken();
          LocalStoreUtil.clearUserInfo();
          LocalStoreUtil.clearCollectList();
          store.user.method.resetData();
          store.collection.collectionList = [];

          router.replace("/login/password")
        }
      })


    })
  }

  const checkParam = () => {
    if (data.value.account === null || data.value.account === '') {
      ElMessage.error('请输入账号！');
      return false;
    }

    if (data.value.password === '' || data.value.verifyPassword === '') {
      ElMessage.error('请输入密码！');
      return false;
    }

    if (data.value.password.length < 6) {
      ElMessage.error('密码长度不能小于6位！');
      return false;
    }

    if (data.value.password !== data.value.verifyPassword) {
      ElMessage.error('两次密码不一致！');
      return false;
    }

    if (!CommonUtil.validatePhoneNumber(data.value.account) && !CommonUtil.validateEmail(data.value.account)) {
      ElMessage.error('手机号或邮箱格式不正确！')
      return false;
    }

    if (data.value.verifyCode === '') {
      ElMessage.error('请输入验证码！')
      return false;
    }

    if (data.value.verifyCode.length !== 6) {
      ElMessage.error('验证码格式错误！')
      return false;
    }

    return true;
  }
</script>

<template>
  <!-- 重置密码标签最外层盒子 -->
  <div class="reset-password-basic">
    <input type="text" class="input-basic" placeholder="手机号/邮箱" maxlength="26" v-model="data.account">
    <input type="password" class="input-basic" placeholder="新密码" maxlength="26" v-model="data.password">
    <input type="password" class="input-basic" placeholder="确认密码" maxlength="26" v-model="data.verifyPassword">
    <div class="send-code-basic">
      <input type="text" class="code-input" placeholder="验证码" maxlength="8" v-model="data.verifyCode">

      <VerifyCodeButton :work-type="3" :target="data.account"></VerifyCodeButton>
    </div>
    <button class="submit-button-basic" @click="reset()">重置密码</button>
  </div>
</template>

<style scoped>
  .reset-password-basic {
    padding: 2px;
    width: 100%;
  }
  /* 文本框基础样式 */
  .input-basic {
    width: 100%;
    height: 42px;
    border-radius: 5px;
    outline: none;
    border: 1px solid white;
    background-color: rgb(242, 242, 242);
    text-indent: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    transition: border .3s;
  }

  /* 文本框悬浮样式 */
  .input-basic:hover {
    border: 1px solid rgb(217, 217, 217);
  }

  /* 文本框获取焦点样式 */
  .input-basic:focus {
    border: 1px solid rgb(0, 102, 224);
  }

  /* 提交按钮基本样式 */
  .submit-button-basic {
    width: 100%;
    background-color: rgb(0, 102, 204);
    border: none;
    line-height: 42px;
    border-radius: 5px;
    font-size: 15px;
    color: white;
    cursor: pointer;
    transition: background-color .2s;
    margin-top: 10px;
  }

  /* 提交按钮悬浮样式 */
  .submit-button-basic:hover {
    background-color: rgb(0, 112, 224);
  }

  /* 发送验证码最外层盒子基础样式 */
  .send-code-basic {
    width: 100%;
    height: 42px;
    color: rgb(0, 102, 204);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  /* 验证码文本框样式 */
  .code-input {
    width: 60%;
    border-radius: 5px;
    outline: none;
    border: 1px solid white;
    background-color: rgb(242, 242, 242);
    text-indent: 10px;
    font-size: 14px;
    transition: border .3s;
  }

  /* 验证码文本框悬浮样式 */
  .code-input:hover {
    border: 1px solid rgb(217, 217, 217);
  }
  /* 验证码文本框获取焦点样式 */
  .code-input:focus {
    border: 1px solid rgb(0, 102, 224);
  }

</style>